<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css switch按钮</title>
    <style>
        .swich {
            display: flex;
            align-items: center;
        }

        input {
            display: none;
        }

        span::after {
            content: "关";
        }

        label {
            display: block;
            position: relative;
            width: 50px;
            height: 24px;
            margin: 0 10px;
            border-radius: 12px;
            background: #ccc;
            cursor: pointer;
            overflow: hidden;
            transition: background .3s;
        }

        label::after {
            content: "";
            display: block;
            position: absolute;
            top: 1px;
            left: 1px;
            width: 22px;
            height: 22px;
            border-radius: 12px;
            background: #fff;
            transition: all .3s;
        }

        label:active::after {
            width: 30px;
        }

        input:checked ~ label {
            background: #6bec7c;
        }

        input:checked ~ label:active::after {
            transform: translateX(18px);
        }

        input:checked ~ label::after {
            transform: translateX(26px);
        }

        input:checked ~ span::after {
            content: "开";
            color: #6bec7c;
        }
    </style>
</head>
<body>
<div class="swich">
    <input type="checkbox" id="ck">
    <span></span>
    <label for="ck"></label>
</div>
</body>
</html>